<template>
  <view class="template-container">
    <rich-text :nodes="parsedTemplate" v-if="parsedTemplate"></rich-text>
    <slot v-else name="fallback"></slot>
    
    <!-- 模板加载状态提示 -->
    <view v-if="showToast" class="template-toast" :class="{ 'success': toastType === 'success', 'error': toastType === 'error' }">
      <text class="toast-text">{{toastMessage}}</text>
    </view>
  </view>
</template>

<script>
import templateService from '@/utils/template';

export default {
  name: 'TemplateRenderer',
  props: {
    // 模板内容
    template: {
      type: String,
      default: ''
    },
    // 替换变量的数据
    data: {
      type: Object,
      default: () => ({})
    },
    // 加载中状态
    loading: {
      type: Boolean,
      default: false
    },
    // 是否显示加载状态提示
    showLoadingToast: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      parsedTemplate: '',
      showToast: false,
      toastMessage: '',
      toastType: 'success', // 'success' 或 'error'
      toastTimer: null
    }
  },
  watch: {
    template: {
      immediate: true,
      handler(newVal, oldVal) {
        if (newVal) {
          // 如果是首次加载或模板内容变化
          if (!oldVal || newVal !== oldVal) {
            this.parseTemplate();
          }
        } else {
          this.parsedTemplate = '';
          if (this.showLoadingToast) {
            this.showToastMessage('模板内容为空', 'error');
          }
        }
      }
    },
    data: {
      deep: true,
      handler(newVal) {
        this.parseTemplate();
      }
    },
    loading(newVal) {
      if (this.showLoadingToast) {
        if (newVal) {
          this.showToastMessage('正在加载模板...', 'success');
        }
      }
    }
  },
  methods: {
    parseTemplate() {
      if (!this.template) {
        this.parsedTemplate = '';
        return;
      }
      
      try {
        // 使用模板服务解析模板
        this.parsedTemplate = templateService.parseTemplate(this.template, this.data);
        
        // 触发解析完成事件
        this.$emit('parsed', this.parsedTemplate);
        
        // 如果解析后内容为空，也认为是错误
        if (!this.parsedTemplate) {
          throw new Error('模板解析结果为空');
        }
        
        if (this.showLoadingToast) {
          this.showToastMessage('模板加载成功', 'success');
        }
      } catch (error) {
        console.error('模板解析失败:', error);
        if (this.showLoadingToast) {
          this.showToastMessage('模板解析失败: ' + error.message, 'error');
        }
        this.$emit('error', error);
      }
    },
    
    // 显示提示消息
    showToastMessage(message, type = 'success') {
      // 清除之前的定时器
      if (this.toastTimer) {
        clearTimeout(this.toastTimer);
      }
      
      this.toastMessage = message;
      this.toastType = type;
      this.showToast = true;
      
      // 3秒后自动隐藏
      this.toastTimer = setTimeout(() => {
        this.showToast = false;
      }, 3000);
    }
  }
}
</script>

<style scoped>
.template-container {
  width: 100%;
  position: relative;
}

.template-toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 10px 15px;
  border-radius: 4px;
  font-size: 14px;
  z-index: 9999;
  max-width: 80%;
}

.template-toast.success {
  background-color: rgba(39, 174, 96, 0.9);
}

.template-toast.error {
  background-color: rgba(231, 76, 60, 0.9);
}

.toast-text {
  color: #fff;
}
</style> 